<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>14_外轮廓</title>
<style>
  .box1{
    width: 800px;
    height: 800px;
    border: 1px solid black;
    margin: 0 auto;
    /*外轮廓大小可以理解为盒子边框发出来的光,不算进盒子大小中,不参与计算盒子大小,不占用位置*/
   outline-color: orange;
    outline-width: 10px;
    outline-style: solid;
    outline-offset: 1px;/*偏移量*/
    float: right;
  /*  复合属性不包括偏移量*/
  /*  outline: 20px orange solid;*/
  }
</style>
</head>
<body>
<div class="box1"></div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus accusantium alias aperiam consequuntur culpa dolor enim ex hic maxime molestiae nihil nostrum obcaecati optio pariatur, possimus quis quo quod ratione reiciendis rerum sint sit unde voluptatibus voluptatum! Commodi consequuntur esse est exercitationem expedita incidunt iste iusto labore nobis nostrum odit, quidem, suscipit ullam unde voluptates? Aspernatur commodi dicta, ex hic minima reiciendis unde. Ab aliquid animi autem beatae commodi, consequuntur cum cumque ea eaque eligendi eos eum excepturi fugiat id ipsa ipsum labore laboriosam maxime molestias mollitia nisi nulla odio provident quos, recusandae reprehenderit, repudiandae soluta sunt ut veritatis?
</body>
</html>